<template>
  <div style="width: 100%; height: 400px" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    knowDevice: Array
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {},
  mounted() {
    this.initChart()
  },
  methods: {
    resize() {
      this.$nextTick(() => {
        this.chart.resize()
      })
    },
    initChart() {
      const data = this.knowDevice
      const legendData = ['Pending publish', 'Published', 'Downloaded', 'Updated', 'Update Failed']
      let sum = 0
      // const legendData = []
      data.forEach((item) => {
        if (item.value > 0) {
          item.label = {
            show: true
          }

          item.labelLine = {
            show: true
          }
        }
        sum += item.value * 1
      })

      data.push({
        name: '',
        value: sum,
        itemStyle: { normal: { color: 'transparent' }},
        tooltip: {
          show: false
        }
      })
      this.chart = echarts.init(this.$el)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function(param) {
            let str = ''
            let c = (sum !== 0 ? (param['value'] / sum) * 100 : 0)
            c = c.toFixed(2)
            str = str + c + '%'
            return str
          }
        },
        grid: {
          top: '700px'
        },
        legend: {
          align: 'left',
          bottom: '50px',
          left: 'center',
          data: legendData,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'circle',
          itemGap: 50,
          formatter: function(name) {
            var total = sum
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var percentValue = total == 0 ? 0 : ((target / total) * 100).toFixed(2)
            var arr = [
              `{b|${percentValue}% (${target})}`,
              '{a|' + name + '}'
            ]
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12
              },
              b: {
                fontSize: 14,
                align: 'left',
                lineHeight: 25,
                fontWeight: 800
              }
            }
          }
        },
        series: [
          {
            name: 'pie',
            type: 'pie',
            startAngle: 180,
            showEmptyCircle: false,
            label: {
              show: false
            },
            radius: ['50%', '65%'],
            center: ['50%', '65%'],
            data,
            itemStyle: {
              color: (object) => object.data.color,
              borderColor: '#fff',
              borderWidth: 1,
              emphasis: {
                shadowOffsetX: 0
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        ]
      }
      this.chart.setOption(option)
    },
    initData() {}
  }
}
</script>

<style>
</style>
